The Hackman at his computer Note: You can combine Bootstrap and CSS styling. It all works!!!!

Spacing Utilities Bootstrap

SEE BELOW THE LAST BLOCK FOR HOW THIS IS CODED

Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.
The page uses Bootstrap combined with styles CSS as well as javascript all framed within HTML.

I only have a top padding (1.5rem)

I have a padding on all sides (3rem)

I have a margin on all sides (3rem) and a bottom padding (3rem)


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  	div.one {
    	font-family:Verdana;
        font-size:150%;
        text-decoration:underline;
        }
        div.two {
    	font-family:serif;
        font-size:150%;
        border:5px dashed rgb(255,102,153);
        }
        
  </style>
</head>
<body>

<div class="container mt-3">
  <h1>Spacing Utilities</h1>
  <p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
  <div class="pt-4 bg-warning text-center one">I only have a top padding (1.5rem)</div>
  <div class="p-5 bg-success text-center two">I have a padding on all sides (3rem)</div>
  <div class="m-5 pb-5 bg-info text-center">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>

</body>
</html>

Return to Table of Contents